<template>
  <div class="userinfo">
    <div class="avatar" v-show="!userLogin">
      <img src="../assets/img/avatar.png" alt="" />
      <h2>未登录</h2>
    </div>
    <div class="avatar" v-show="userLogin && userData">
      <img :src="userData.avatar" alt="" />
      <h2>{{ userData.username }}</h2>
    </div>

    <div class="list" >
      <router-link to="/travelers" tag="div" class="li">常用出行人<img src="../assets/img/arrow.png" alt="" /></router-link>
      <router-link to="/userinfo" tag="div" class="li">优惠券<img src="../assets/img/arrow.png" alt="" /></router-link>
      <router-link to="/historicalhistory" tag="div" class="li">浏览历史<img src="../assets/img/arrow.png" alt="" /></router-link>
      <router-link to="/userinfo" tag="div" class="li">关于我们<img src="../assets/img/arrow.png" alt="" /></router-link>
    </div>

    <div class="quit" @click="quitLogin" v-show="userLogin">退出登录</div>
    <div class="login" @click="none" v-show="!userLogin">登录/注册</div>


    <!-- 登录，注册组件 -->
    <transition>
      <login-registered
        :login="login"
        @none="none"
        @set-login="setLogin"
      ></login-registered>
    </transition>

    <footer-nav></footer-nav>
  </div>
</template>

<script>

import FooterNav from "../components/FooterNav.vue";
import LoginRegistered from "../components/LoginRegistered.vue";
import { getUserList } from "../api/home.js";
export default {
  data() {
    return {
      login: false,
      userData: [],
      userLogin: true,
    };
  },
  components: {
    LoginRegistered,
    FooterNav,
    
  },
  methods: {
    none() {
      this.login = !this.login;
    },

    //退出登录并删除缓存
    quitLogin() {
      this.userLogin = false;
      localStorage.setItem("userId", null);

      // console.log(localStorage.getItem("userId"));
    },
    // 数据
    getUserListFun() {
      getUserList().then((data) => {
        this.userData = data.userdata;
      });
    },
    //写入缓存
    setLogin(obj) {
      // localStorage.setItem("userId","lihua123123")
      let { Newname, Newpassword } = obj;
      let { username, password } = this.userData;
      if (Newname == username && Newpassword == password) {
        this.userLogin = true;
        this.login = false;
        localStorage.setItem("userId", "lihua123123");
        this.$toast("登录成功")
      } else {
        this.$toast("账号或密码错误")
      }
    },
    //获取缓存
    loginFun() {
      // console.log(localStorage.getItem("userId"));
      if (localStorage.getItem("userId") == "null") {
        this.userLogin = false;
      } else {
        this.userLogin = true;
      }
    },
  },
  created() {
    this.getUserListFun();
    this.loginFun();
  },
};
</script>

<style lang="scss" scoped>
.userinfo {
  height: 100%;
  background: linear-gradient(to bottom, #80d7d1 30%, #f6f6f6 40%);
  background-color: #f6f6f6;
  background-repeat: no-repeat;
  .v-leave-to {
    transform: translateY(100%);
    opacity: 0;
  }
  .v-leave-active {
    transition: 0.2s linear;
  }
  .login {
    margin: 20px 15px;
    text-align: center;
    height: 45px;
    line-height: 45px;
    font-size: 18.5px;
    color: #fff;
    border-radius: 3px;
    background: #80d7d1;
  }
  .avatar {
    display: flex;
    flex-direction: column;
    padding-top: 34px;
    align-items: center;
    img {
      width: 71.89px;
      height: 71.89px;
      border-radius: 50%;
    }
    h2 {
      font-weight: normal;
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
    }
  }
  .list {
    padding: 14.5px 20px 20.5px;
    margin: 20px 15px;
    background-color: #fff;
    border-radius: 4px;
    color: #333;
    font-size: 18px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    .li {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 7px;
        height: 12px;
      }
    }
  }
  .quit {
    font-size: 18px;
    color: #ed5d17;
    margin: 20px 15px;
    display: flex;
    justify-content: center;
  }
}
</style>